<template>
  <div>
    <!--餐品管理表格-->
    <el-table
      :data="cates"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述"
        width="180">
      </el-table-column>
      <el-table-column
        prop="addTime"
        label="添加时间"
        :formatter="dateFormat">
      </el-table-column>
      <el-table-column
        prop="isDefault"
        label="操作"
        align="right">
        <template slot="header" slot-scope="scope">
          <el-button
            size="mini"
            @click="handleAdd">新增</el-button>
        </template>

        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--新增类别对话框-->
    <div>
      <el-dialog
        title="新增类别"
        :visible.sync="dialogVisible1"
        width="30%"
        :before-close="handleClose">
        <el-form label-position="right" label-width="80px" :model="newCategory">
          <el-form-item label="名称">
            <el-input v-model="newCategory.name"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="newCategory.description"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onAdd">添加类别</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <!--修改类别对话框-->
    <div>
      <el-dialog
        title="修改类别"
        :visible.sync="dialogVisible2"
        width="30%"
        :before-close="handleClose">
        <el-form label-position="right" label-width="80px" :model="updateCategory">
          <el-form-item label="名称">
            <el-input v-model="updateCategory.name"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="updateCategory.description"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onUpdate">修改类别</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
    export default {
        name: "CateManage",
      inject: ['reload'],
      data() {
        return {
          dialogVisible1: false,  //新增弹出框
          dialogVisible2: false,  //修改弹出框
          // 类别列表
          cates: [],
          // 新增类别信息
          newCategory: {
            restaurantId: null,
            name: '',
            description: '',
            addTime: null
          },
          //修改类别信息
          updateCategory: {
            id: null,
            restaurantId: null,
            name: '',
            description: '',
            addTime: null
          }
        }
      },
      created() {
          this.$axios({
            method: "get",
            url: "/cate/list",
            params: {
              rid: this.$store.getters.rid
            }
          })
            .then(response => {
              if (response.data.success) {
                this.cates=response.data.cate_list
              }
              console.log(response.data.message)
            })
            .catch(error => console.log(error));
      },
      methods: {
        handleClose(done) {
          // this.$confirm('确认关闭？')
          //   .then(_ => {
          //     done();
          //   })
          //   .catch(_ => {});
          done();
        },
        handleAdd: function () {
          this.dialogVisible1 = true;
        },
        //修改
        handleEdit(index, row) {
          this.updateCategory.id=row.id;
          this.updateCategory.name=row.name;
          this.updateCategory.description=row.description;
          this.dialogVisible2=true;
        },
        //删除
        handleDelete(index, row) {
          // console.log(index, row);
          this.$confirm('确认删除这个类别?')
            .then(_ => {
              this.$axios({
                method: "get",
                url: "/cate/delete",
                params: {
                  id: row.id
                }
              })
                .then(response => {
                  if (response.data.success) {
                    this.reload();
                  }
                  console.log(response.data.message)
                })
                .catch(error => console.log(error))
            })
            .catch(_ => {});
        },
        // 提交新的cate
        onAdd() {
          this.$axios({
            method: "post",
            url: "/cate/newcate",
            data: {
              restaurantId: this.$store.getters.rid,
              name: this.newCategory.name,
              description: this.newCategory.description,
              addTime: new Date().getTime()
            }
          })
            .then(response => {
              if (response.data.success) {
                this.dialogVisible1=false;
                this.reload();
              }
              console.log(response.data.message)
            })
            .catch(error => console.log(error));

        },
        // 提交修改cate
        onUpdate() {
          this.$axios({
            method: "post",
            url: "/cate/updatecate",
            data: {
              id: this.updateCategory.id,
              name: this.updateCategory.name,
              description: this.updateCategory.description,
            }
          })
            .then(response => {
              if (response.data.success) {
                this.dialogVisible2=false;
                this.reload();
              }
              console.log(response.data.message)
            })
            .catch(error => console.log(error));
        },
        // 格式化时间
        dateFormat(row,column) {
          var date = row[column.property];
          if (date === undefined) {
            return ''
          }
          return moment(date).format("YYYY-MM-DD HH:mm:ss")
        }
      }
    }
</script>

<style scoped>

</style>
